<!DOCTYPE html>
<html>
<head>
<title>JS删除tr节点--循环绑定鼠标移入移出事件</title>
<meta http-equiv="Content-Type" />

</head> 
<body> 
<!--<tr style="background-color: red;" >-->
<table border="1" width="30%" id="table">
	<tr>
		<th>学号</th>
		<th>姓名</th>
		<th>操作</th>
	</tr>

	<tr id="tr1">
		<td>xh001</td>
		<td>王小明</td>
		<td>
			<a href="javascript:del('tr1');">删除</a>
		</td>
		<!--在 删除按钮上添加点击事件  -->
	</tr>

	<tr id="tr2">
		<td>xh002</td>
		<td>刘小芳</td>
		<td>
			<a href="javascript:del('tr2');">删除</a>
		</td>
		<!--在删除按钮上添加点击事件  -->
	</tr>

</table>
<input type="button" value="添加一行" onclick="add()" />   <!--在添加按钮上添加点击事件  -->
</body>
<script type="text/javascript">
	window.onload = function() {
		// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
		var trnode=table.childNodes[1].childNodes;
		for(var i=0;i<trnode.length;i++){
			if(trnode[i].nodeType && trnode[i].nodeType==1){
				trnode[i].style.backgroundColor='#CCCC00';
				trnode[i].setAttribute('onmouseover','this.style.backgroundColor="red"');
				trnode[i].setAttribute('onmouseout','this.style.backgroundColor="#CCCC00"');
				console.log(trnode[i]);
			}
		}
	}
	
	//循环添加鼠标移入、移出事件（如果没有这个方法，window.onload只能对最前面的两个tr生效）
	function onout_event(){
		var table = document.getElementById('table');
		var trnode=table.childNodes[1].childNodes;
		for(var i=0;i<trnode.length;i++){
			if(trnode[i].nodeType && trnode[i].nodeType==1){
				trnode[i].style.backgroundColor='#CCCC00';
				trnode[i].setAttribute('onmouseover','this.style.backgroundColor="red"');
				trnode[i].setAttribute('onmouseout','this.style.backgroundColor="#CCCC00"');
//				console.log(trnode[i]);
			}
		}
		i=setTimeout("onout_event()",500);
	}
	onout_event();
	
	// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点.；
	var addid=2;
	var addtr,newadd,td_text1,td_text2,td;
	function add(){
		addid++;
		addtr=document.createElement('tr');
//		trtext=document.createTextNode('<td>xh002</td><td>刘小芳</td><td><a href="javascript:del(\'tr2\');">删除</a></td>');
//		addtr.appendChild(trtext);
		newadd = table.childNodes[1].appendChild(addtr);
		newadd.setAttribute("id","tr"+addid);
		
		addtd1 = document.createElement('td');
		addtd1_add = newadd.appendChild(addtd1);
		td_text1 = document.createTextNode("xh00"+addid);
		addtd1.appendChild(td_text1);
		
		addtd2 = document.createElement('td');
		addtd2_add = newadd.appendChild(addtd2);
		td_text2 = document.createTextNode("张三"+addid);
		addtd2.appendChild(td_text2);
		
		addtd3 = document.createElement('td');
		addtd3_add = newadd.appendChild(addtd3);
		adda = document.createElement("a");
		td3_a = addtd3_add.appendChild(adda);
		td3_a.setAttribute("href","javascript:del('tr"+addid+"');");
		td3_a_text = document.createTextNode("删除");
		td3_a.appendChild(td3_a_text);
		
		console.log(newadd);
	}
	// 创建删除函数
	function del(trn){
		var trid=document.getElementById(trn);
		trid.parentNode.removeChild(trid);
	}
</script>
</html>